<template>
    <div>
        <div class="title">周末去哪儿</div>
        <ul>
            <li class="item border-bottom" v-for="item in list" :key="item.id">
                <img class="item-img" :src="item.imgUrl" :alt="item.alt">
                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                    <!-- <button class="item-button">查看详情</button> -->
                </div>
            </li>
        </ul>
    </div>
    
</template>

<script>
export default {
    name: 'HomeWeekend',
    props: {
        list: Array
    }
    // data () {
    //     return {
    //         recommendList: [
    //             {
    //                 id: '0001',
    //                 imgUrl: 'http://img1.qunarzz.com/sight/source/1812/b4/e9d7f043c4fadf.jpg_r_640x214_713df0cf.jpg',
    //                 alt: '大连泡汤圣地',
    //                 title: '大连泡汤圣地',
    //                 desc: '享受生活，放松自己，来一段轻松的旅程。'
    //             }, 
    //             {
    //                 id: '0002',
    //                 imgUrl: 'http://img1.qunarzz.com/sight/source/1505/7f/fa4eb0ca72409d.jpg_r_640x214_2f2a860e.jpg',
    //                 alt: '大连必打卡',
    //                 title: '大连必打卡',
    //                 desc: '爱上北方的碧海蓝天'
    //             }, 
    //             {
    //                 id: '0003',
    //                 imgUrl: 'http://img1.qunarzz.com/sight/source/1505/89/267342d404cbd7.jpg_r_640x214_8d8d1162.jpg',
    //                 alt: '亲子游乐',
    //                 title: '亲子游乐',
    //                 desc: '来生机勃勃的森林野生动物园留下你们珍贵的足迹，这里是儿童的天堂，大人最美好的回忆'
    //             }
    //         ]
    //     }
    // }
}
</script>

<style lang="scss" scoped>
    // %ellipsis {
    //     overflow: hidden;
    //     white-space: nowrap;
    //     text-overflow: ellipsis;
    // }
    @import '../../../assets/styles/varibles.scss';  

    .title {
        line-height: .8rem;
        background-color: #eee;
        text-indent: .2rem; 
    }

    .item-img {
        width: 100%;
    }

    .item-info {
        padding: .1rem;

        .item-title {
            line-height: .54rem;
            font-size: .32rem;
            @extend %ellipsis;
        }

        .item-desc {
            line-height: .4rem;
            color: #ccc;
            @extend %ellipsis;
        }
    }
    
</style>
